<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="260px">
                <Menu />
            </el-aside>
            <el-container>
                <el-header>
                    <Header />
                </el-header>
                <el-main>
                    <el-scrollbar>
                        <div class="box">
                            <transition name="fade" mode="out-in">
                                <router-view></router-view>
                            </transition>
                        </div>
                    </el-scrollbar>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import Header from '@/views/basic/Header.vue'
import Menu from '@/views/basic/Menu.vue'
</script>

<style lang="scss" scoped>
:deep .el-header {
    padding: 0;
}

:deep .el-main {
    background-color: #eee;
    padding: 0px;
    height: calc(100vh - 90px);

    .box {
        background-color: #fff;
        border: 1px solid #eee;
        padding: 15px;
        border-radius: 3px;
        margin: 15px;
        min-height: calc(100vh - 90px);
    }
}
</style>
